<!DOCTYPE html>
<html lang="zh-CN
<head>
    <meta charset=" UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多列布局示例ntnt</title>
<style>
    * {
        margin: 0;
        padding: 0;

    }

    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        color: #333;
        background-color: #f4f4f4;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    header {
        background-color: #333;
        color: #fff;
        padding: 20px 0;
        text-align: center;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 20px 0;
    }

    .column {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .column h2 {
        color: #333;
        margin-bottom: 15px;
        font-size: 1.5em;
    }

    .column p {
        margin-bottom: 15px;
    }

    .column img {
        width: 100%;
        height: auto;
        border-radius: 4px;
        margin-bottom: 15px;
    }

    footer {
        background-color: #333;
        color: #fff;
        padding: 20px 0;
        text-align: center;
        margin-top: 20px;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .grid-container {
            grid-template-columns: 1fr;
        }
    }
</style>
</head>

<body>
    <header>
        <div class="container">
            <h1>多列布局示例</h1>
            <p>这是一个使用CSS Grid实现的三列布局页面</p>
        </div>
    </header>

    <main class="container">
        <div class="grid-container">
            <div class="column">
                <h2>第一列</h2>
                <img src="https://via.placeholder.com/300x200" alt="示例图片">
                <p>这是第一列的内容。CSS Grid是一种强大的布局系统，可以轻松创建复杂的网格布局。它允许你定义行和列，并将元素放置在网格中的特定位置。</p>
                <p>Grid布局非常适合创建响应式设计，因为你可以使用媒体查询轻松更改网格结构。</p>
            </div>

            <div class="column">
                <h2>第二列</h2>
                <img src="https://via.placeholder.com/300x200" alt="示例图片">
                <p>这是第二列的内容。使用Grid布局，你可以精确控制元素的大小和位置，创建出美观且功能强大的页面布局。</p>
                <p>Grid布局支持多种对齐方式、间距控制和响应式设计，是现代前端开发的重要工具。</p>
            </div>

            <div class="column">
                <h2>第三列</h2>
                <img src="https://via.placeholder.com/300x200" alt="示例图片">
                <p>这是第三列的内容。除了Grid布局，Flexbox也是一种常用的布局方式，适合创建一维布局。</p>
                <p>将Grid和Flexbox结合使用，可以创建出更加复杂和灵活的页面布局，满足各种设计需求。</p>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2025 多列布局示例. 保留所有权利.</p>
        </div>
    </footer>
</body>

</html>